<template>
	<view class="select-list">
		<view class="item" :class="{ 'active': activeValue(item) }" v-for="(item, index) in list" :key="index"
			@click="onSelectClick(item, index)">
			<view class="wrap">
				<view class="text">{{ item[labelKey] }}</view>
				<view class="icon"><u-icon v-show="activeValue(item)" name="checkbox-mark"></u-icon></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "select-item",
	props: {
		value: {
			type: [String, Number],
		},
		list: {
			type: Array,
			default: () => []
		},
		labelText: {
			type: String
		},
		valueText: {
			type: String
		}
	},
	computed: {
		labelKey() {
			return this.labelText || 'label'
		},
		valueKey() {
			return this.valueText || 'value'
		},
		activeValue() {
			return (item) => {
				return this.value !== '' ? this.value == item.value : null;
			}
		},
	},
	methods: {
		onSelectClick(item, index) {
			this.$emit('change', item.value)
		}
	}
}
</script>

<style scoped lang="scss">
.select-list {
	.item {
		&.active {
			color: $main-color;

			.icon {
				color: #C91C23;
			}
		}
	}

	.wrap {
		padding: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
</style>